<template>
  <div class="page-wrapper">
    <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <label>药店：</label>
            <Select v-model="filterObj.hospitalid" :key="filterObj" filterable>
                <Option value="all" key="all">全部</Option>
                <Option v-for="item in hospitalList" :value="item.id" :key="item.id">{{ item.orgName }}</Option>
            </Select>
          </div>
          <div class="filter-item">
            <label>状态：</label>
            <Select v-model="filterObj.authStatus" :key="filterObj" filterable>
                <Option value="all" key="all">全部</Option>
                <Option v-for="item in authStatusList" :value="item.dictValue" :key="item.dictValue">{{ item.dictName }}</Option>
            </Select>
          </div>
          <div class="filter-item">					
            <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" placeholder="申请日期" separator='至' class='fone'></DatePicker>						
          </div>
          <div class="filter-item">					
            <DatePicker type="daterange" v-model="filterObj.stime" placement="bottom-end" placeholder="审核日期" separator='至' class='fone'></DatePicker>						
          </div>
          <div class="filter-item">
            <label>药品：</label>
            <Input v-model="filterObj.drugName" />
          </div>
          <div class="filter-btn-group">
            <Button style="width:75px;height:35px;" type="primary" class='ftwo' @click="handleSearch" icon="ios-search">查询</Button>
            <Button style="width:75px;height:35px;" class='ftwo'  @click="handleReset">重置</Button>
          </div>
        </div>
      </header>
      <div class='fthree'>
        <tablePlus 
          :pagination="pagination"
          @on-change="onChange"
          :data="dataSource"
          :columns="columns"
          :loading="loading"
        />
      </div>
      <Modal
          v-model="showModal"
          title="作废信息">
          <p>作废时间：{{zuofeiObj.expressTime}}</p>
          <p>作废原因：{{zuofeiObj.statusMsg}}</p>
          <div slot="footer"></div>
      </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import tablePlus from "@/components/tablePlus";
import Utils from "@/utils";
import { DatePicker } from "view-design";
const filterObj = {
  hospitalid: 'all',
  authStatus: 'all',
  time: [],
  stime: [],
  drugName: null
};
const pagination  ={
  pageNo: 1,
  pageSize: 10,
  count: 0
};
export default {
  components: {
    tablePlus,
    DatePicker
  },
  data() {
    const that = this;
    return {
      hospitalList: [],
      authStatusList: [
        {dictName: '待采购', dictValue: 1},
        {dictName: '采购中', dictValue: 2},
        {dictName: '已收货', dictValue: 3},
        {dictName: '已作废', dictValue: 4}
      ],
      filterObj: { ...filterObj },
      pagination: { ...pagination },
      dataSource: [],
      columns: [
        { type: 'index', width: 60, align: 'center', title: '排序'},
        { key: 'applyNo', title: '采购申请单号'},
        { key: 'hospital', title: '药店'},
        { key: 'ypmc', title: '药品通用名'},
        { key: 'ypjx', title: '剂型'},
        { key: 'ypgg', title: '规格'}, 
        { key: 'scqymc', title: '厂家'},
        { key: 'zxdw', title: '单位'},
        { key: 'applyTime', title: '申请日期'},
        { key: 'applyNumber', title: '申请数量'},
        { key: 'auditTime', title: '审核日期'},
        { key: 'purchaseNumber', title: '审核通过数量'},
        { key: 'auditMsg', title: '审核说明'},
        {
          key: 'expressTime', title: '收货日期', render(h, params) {
            const { purchaseStatus, expressTime } = params.row;
            return purchaseStatus == '3' ? expressTime : '--';
          }
        },
        { key: 'purchaseStatus', title: '状态', render(h, params) {
          const statusText = (that.authStatusList.filter(item => item.dictValue == params.row.purchaseStatus)[0] || {}).dictName;
          const {purchaseStatus, statusMsg, expressTime} = params.row;
          return h('div', {
            style: {
              color: ['', 'rgb(255, 148, 67)', '', 'rgb(12, 147, 38)', 'rgb(255, 18, 28)'][purchaseStatus]
            },
            on: {
              click() {
                if (params.row.purchaseStatus != 4) return false; 
                that.zuofeiObj.statusMsg = statusMsg;
                that.zuofeiObj.expressTime = expressTime;
                that.showModal = true;
              }
            }
          }, statusText)
        }}
      ],
      loading: false,
      showModal: false,
      zuofeiObj: {
        statusMsg: '',
        expressTime: '',
      },
    }
  },
  created() {
    let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "",
            title: "采购管理"
        },
        {
            path: "/index/drugfirmsmanage/procurement/purchaseQuery/list",
            title: "采购需求查询"
        }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    this.getMechanismreg();
    this.findPurchaseNeedByPage();
  },
  methods: {
    handleSearch() {
      this.pagination.pageNo = 1;
      this.findPurchaseNeedByPage();
    },
    handleReset() {
      this.filterObj = { ...filterObj };
      this.pagination = { ...pagination };
      this.findPurchaseNeedByPage();
    },
    onChange(pagination) {
      this.pagination = { ...pagination }
      this.findPurchaseNeedByPage();
    },
    addSupply() {
      this.jumpTo('/index/drugfirmsmanage/procurement/supplier/add');
    },
    jumpTo(path, query = {}) {
      this.$router.push({
        path,
        query: Object.assign({
          filterObj: encodeURIComponent(JSON.stringify(this.filterObj)),
          pagination: encodeURIComponent(JSON.stringify(this.pagination))
        }, query)
      });
    },
    findPurchaseNeedByPage() {
      const reqBody = {
        ...this.filterObj,
        page: this.pagination.pageNo,
        row: this.pagination.pageSize
      };
      reqBody.hospitalid === 'all' && (delete reqBody.hospitalid);
      reqBody.authStatus === 'all' && (delete reqBody.authStatus);
      let startTime = Utils.getNowDateBySpecialFormat(reqBody.time[0])
      let endTime = Utils.getNowDateBySpecialFormat(reqBody.time[1])
      reqBody.startTime = startTime ? startTime : null;
      reqBody.endTime = endTime ? endTime : null;
      let astartTime = Utils.getNowDateBySpecialFormat(reqBody.stime[0])
      let aendTime = Utils.getNowDateBySpecialFormat(reqBody.stime[1])
      reqBody.astartTime = astartTime ? astartTime : null;
      reqBody.aendTime = aendTime ? aendTime : null;
      console.log(JSON.stringify(reqBody));
      this.loading = true;
      this.$axios.post(api.getPurchaseDemandByPage, reqBody).then(res => {
          if (res.data.code === 1) {
              const { records, total, current } = res.data.object;
              this.dataSource = records;
              this.pagination.count = total;
              if (!this.dataSource && (current !== 1)) {
                this.pagination.pageNo = this.pagination.pageNo - 1;
                this.findPurchaseNeedByPage();
              }
          } else {
              this.$Message.error(res.data.message);
          }
          this.loading = false;
      });
    },

    getMechanismreg() {
      // let params = {
      //   pageNo: 1,
      //   pageSize: 9999,
      //   hospitalType:2,
      // };
      // this.$axios.post(api.findKbaoHospitalRegisterDtoPage, params).then(res => {
      //   if (res.data.code) {
      //     this.hospitalList = res.data.object;
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
      this.$axios.post(api.mechanismregList, {pageNo: 1, pageSize: 9999, hospitalType: 2}).then(res => {
          if (res.data.code === 1) {
              this.hospitalList = res.data.object.records;
          }else {
            this.$Message.error(res.data.message);
          }
      });
    }
  }
}
</script>

<style scoped lang="less">
.fthree{padding: 10px 0 20px;}
.filter-part {
  display: flex;
  flex-wrap: wrap;
  .filter-item {
    display: flex;
    margin: 10px 10px 10px 0;
    .fone{width:200px;}
    label {
      white-space: nowrap;
      line-height: 32px;
      padding-left: 5px;
      text-align: right;
    }
    .input {
      width: 220px;
    }
    .select {
      width: 70px;
    }
  }
  .filter-btn-group {
    margin: 10px 10px 10px 0;
    flex: 0 0 auto;
    .ftwo{width:75px;}
  }
}
</style>